<template>
    <div class="query">
        <!-- 高级查询 -->
        <el-dialog title="高级查询" :visible.sync="dialogVisible" width="65%" :close-on-click-modal="false">
            <div v-if="tabPaneType == 'File'">
                <table>
                    <tr>
                        <td>规则编号：</td>
                        <td>
                            <el-input v-model="indexClauseRelationParam.entryCode" placeholder="" size="mini" style="width: 66%"> </el-input>
                            <div style="float: right; border: 1px solid #dcdfe6; height: 28px; line-height: 28px; padding: 0px 2px">
                                <el-checkbox v-model="indexClauseRelationParam.exactSelect">精准查询</el-checkbox>
                            </div>
                        </td>
                        <td>生效日期：</td>
                        <td>
                            <el-date-picker
                                v-model="startTime"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                size="mini"
                                style="width: 100%"
                                value-format="yyyyMMdd"
                            >
                            </el-date-picker>
                        </td>
                    </tr>
                    <tr>
                        <td>规则说明：</td>
                        <td>
                            <el-input v-model="indexClauseRelationParam.entryName" placeholder="" size="mini"> </el-input>
                        </td>
                        <td>失效日期：</td>
                        <td>
                            <el-date-picker
                                v-model="endTime"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                size="mini"
                                style="width: 100%"
                                value-format="yyyyMMdd"
                            >
                            </el-date-picker>
                        </td>
                    </tr>
                    <tr>
                        <td>条款来源：</td>
                        <td>
                            <el-select v-model="indexClauseRelationParam.clauseSource" placeholder="请选择" size="mini">
                                <el-option
                                    v-for="itme in alertControlGrade"
                                    :key="itme.dictKey"
                                    :value="itme.dictKey"
                                    :label="itme.dictKeyName"
                                ></el-option>
                            </el-select>
                        </td>
                        <td>作用范围：</td>
                        <td>
                            <el-select v-model="indexClauseRelationParam.riskCalTypes" multiple placeholder="" size="mini" clearable>
                                <el-option value="0" label="静态"></el-option>
                                <el-option value="1" label="指令"></el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td>产品代码：</td>
                        <td>
                            <el-select v-model="indexClauseRelationParam.accountControlValue" placeholder="" size="mini" clearable filterable>
                                <el-option
                                    v-for="item in fundCodeSelectData"
                                    :key="item.fundCode"
                                    :value="item.fundCode"
                                    :label="item.fundCode + ' ' + item.fundNameSt"
                                ></el-option>
                            </el-select>
                        </td>
                        <td>启用状态：</td>
                        <td>
                            <el-select v-model="indexClauseRelationParam.entryStatus" placeholder="" size="mini" clearable>
                                <el-option label="启用" value="1"></el-option>
                                <el-option label="停用" value="0"></el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td>规则来源：</td>
                        <td>
                            <el-select v-model="indexClauseRelationParam.sourceType" placeholder="请选择" size="mini" clearable>
                                <el-option label="本地" value="1" key="1"></el-option>
                                <el-option label="恒生-主动" value="2" key="2"></el-option>
                                <el-option label="恒生-被动" value="5" key="5"></el-option>
                            </el-select>
                        </td>
                        <td>规则类型：</td>
                        <td>
                            <el-select v-model="indexClauseRelationParam.entryTypes" multiple placeholder="请选择" size="mini" clearable>
                                <el-option label="资产类" value="0" key="0"></el-option>
                                <el-option label="数量类" value="1" key="1"></el-option>
                                <el-option label="控制指标类" value="2" key="2"></el-option>
                                <el-option label="同向反向控制" value="3" key="3"></el-option>
                                <el-option label="时间限制类" value="4" key="4"></el-option>
                                <el-option label="范围控制类" value="5" key="5"></el-option>
                                <el-option label="交易额控制类" value="6" key="6"></el-option>
                                <el-option label="单笔控制" value="8" key="8"></el-option>
                                <el-option label="单一行业权重控制" value="9" key="9"></el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td>规则组：</td>
                        <td>
                            <el-select
                                v-model="indexClauseRelationParam.productGroup"
                                placeholder=""
                                size="mini"
                                style="width: 66%"
                                clearable
                                filterable
                            >
                                <el-option
                                    v-for="item in fundGroups"
                                    :key="item.fundGroupCode"
                                    :label="item.fundGroupCode + ' ' + item.fundGroupName"
                                    :value="item.fundGroupCode"
                                ></el-option>
                            </el-select>
                            <div style="float: right; border: 1px solid #dcdfe6; height: 28px; line-height: 28px; padding: 0px 2px">
                                <el-checkbox v-model="indexClauseRelationParam.excludeProductGroup">排除选中</el-checkbox>
                            </div>
                        </td>
                        <td>自定义分类：</td>
                        <td>
                            <el-select v-model="indexClauseRelationParam.customType" multiple placeholder="" size="mini" clearable>
                                <el-option label="市场风险" value="0" key="0"></el-option>
                                <el-option label="信用风险" value="1" key="1"></el-option>
                                <el-option label="流动性风险" value="2" key="2"></el-option>
                                <el-option label="操作风险" value="3" key="3"></el-option>
                                <el-option label="投资合规风险" value="4" key="4"></el-option>
                            </el-select>
                        </td>
                    </tr>
                </table>
            </div>
            <div v-if="tabPaneType == 'Product'">
                <table>
                    <tr>
                        <td>规则编号：</td>
                        <td>
                            <el-input v-model="indexClauseRelationParamProduct.entryCode" placeholder="" size="mini" style="width: 66%"> </el-input>
                            <div style="float: right; border: 1px solid #dcdfe6; height: 28px; line-height: 28px; padding: 0px 2px">
                                <el-checkbox v-model="indexClauseRelationParamProduct.exactSelect">精准查询</el-checkbox>
                            </div>
                        </td>
                        <td>生效日期：</td>
                        <td>
                            <el-date-picker
                                v-model="startTimeProduct"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                size="mini"
                                style="width: 100%"
                                value-format="yyyyMMdd"
                            >
                            </el-date-picker>
                        </td>
                    </tr>
                    <tr>
                        <td>规则说明：</td>
                        <td>
                            <el-input v-model="indexClauseRelationParamProduct.entryName" placeholder="" size="mini"> </el-input>
                        </td>
                        <td>失效日期：</td>
                        <td>
                            <el-date-picker
                                v-model="endTimeProduct"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                size="mini"
                                style="width: 100%"
                                value-format="yyyyMMdd"
                            >
                            </el-date-picker>
                        </td>
                    </tr>
                    <tr>
                        <td>条款来源：</td>
                        <td>
                            <el-select v-model="indexClauseRelationParamProduct.clauseSource" placeholder="请选择" size="mini" clearable>
                                <el-option
                                    v-for="itme in alertControlGrade"
                                    :key="itme.dictKey"
                                    :value="itme.dictKey"
                                    :label="itme.dictKeyName"
                                ></el-option>
                            </el-select>
                        </td>
                        <td>作用范围：</td>
                        <td>
                            <el-select v-model="indexClauseRelationParamProduct.riskCalTypes" multiple placeholder="" size="mini" clearable>
                                <el-option value="0" label="静态"></el-option>
                                <el-option value="1" label="指令"></el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td>产品代码：</td>
                        <td>
                            <el-select v-model="indexClauseRelationParamProduct.accountControlValue" placeholder="" size="mini" clearable filterable>
                                <el-option
                                    v-for="item in fundCodeSelectData"
                                    :key="item.fundCode"
                                    :value="item.fundCode"
                                    :label="item.fundCode + ' ' + item.fundNameSt"
                                ></el-option>
                            </el-select>
                        </td>
                        <td>启用状态：</td>
                        <td>
                            <el-select v-model="indexClauseRelationParamProduct.entryStatus" placeholder="" size="mini" clearable>
                                <el-option label="启用" value="1"></el-option>
                                <el-option label="停用" value="0"></el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td>规则来源：</td>
                        <td>
                            <el-select v-model="indexClauseRelationParamProduct.sourceType" placeholder="请选择" size="mini" clearable>
                                <el-option label="本地" value="1" key="1"></el-option>
                                <el-option label="恒生-主动" value="2" key="2"></el-option>
                                <el-option label="恒生-被动" value="5" key="5"></el-option>
                            </el-select>
                        </td>
                        <td>规则类型：</td>
                        <td>
                            <el-select v-model="indexClauseRelationParamProduct.entryTypes" multiple placeholder="请选择" size="mini" clearable>
                                <el-option label="资产类" value="0" key="0"></el-option>
                                <el-option label="数量类" value="1" key="1"></el-option>
                                <el-option label="控制指标类" value="2" key="2"></el-option>
                                <el-option label="同向反向控制" value="3" key="3"></el-option>
                                <el-option label="时间限制类" value="4" key="4"></el-option>
                                <el-option label="范围控制类" value="5" key="5"></el-option>
                                <el-option label="交易额控制类" value="6" key="6"></el-option>
                                <el-option label="单笔控制" value="8" key="8"></el-option>
                                <el-option label="单一行业权重控制" value="9" key="9"></el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td>规则组：</td>
                        <td>
                            <el-select
                                v-model="indexClauseRelationParamProduct.productGroup"
                                placeholder=""
                                size="mini"
                                style="width: 66%"
                                clearable
                                filterable
                            >
                                <el-option
                                    v-for="item in fundGroups"
                                    :key="item.fundGroupCode"
                                    :label="item.fundGroupCode + ' ' + item.fundGroupName"
                                    :value="item.fundGroupCode"
                                ></el-option>
                            </el-select>
                            <div style="float: right; border: 1px solid #dcdfe6; height: 28px; line-height: 28px; padding: 0px 2px">
                                <el-checkbox v-model="indexClauseRelationParamProduct.excludeProductGroup">排除选中</el-checkbox>
                            </div>
                        </td>
                        <td>自定义分类：</td>
                        <td>
                            <el-select v-model="indexClauseRelationParamProduct.customType" multiple placeholder="" size="mini" clearable>
                                <el-option label="市场风险" value="0" key="0"></el-option>
                                <el-option label="信用风险" value="1" key="1"></el-option>
                                <el-option label="流动性风险" value="2" key="2"></el-option>
                                <el-option label="操作风险" value="3" key="3"></el-option>
                                <el-option label="投资合规风险" value="4" key="4"></el-option>
                            </el-select>
                        </td>
                    </tr>
                </table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button @click="confirmQuery('reset')">重 置</el-button>
                <el-button type="primary" @click="confirmQuery('comfirm')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator';
import { dateFormat } from '@/utils/tools';
import DictionConstUtil, { SGU_CACHE } from '@/utils/diction-const-util';
@Component({
    name: 'RuleQueryDialog',
    components: {},
})
export default class RuleQueryDialog extends Vue {
    @Prop() ruleQueryDialog;
    @Prop() tabPaneType;
    private dialogVisible: boolean = false;
    private queryList = {
        type: '',
    };
    startTime = '';
    endTime = '';
    startTimeProduct = '';
    endTimeProduct = '';
    EntryTypeList: any[] = [];
    customTypesList: any[] = [];
    // entryGroupsList: any[] = [];
    accountList: any[] = [];
    fundCodeSelectData: any[] = []; // 产品代码下拉框数据
    fundGroups: any[] = []; // 规则组
    indexClauseRelationParam = {
        entryCode: '', // 规则编号
        exactSelect: false, // 精准查询
        effectStartDate: '', // 生效开始日期
        effectEndDate: '', // 生效结束日期
        invalidStartDate: '', // 失效开始日期
        invalidEndDate: '', // 失效结束日期
        entryName: '', // 规则说明
        clauseSource: '', // 条款来源
        riskCalTypes: [], // 作用范围
        accountControlValue: '', // 产品代码
        fundCode: '',
        entryStatus: '', // 启用状态
        sourceType: '', // 规则来源
        entrySource: '',
        entryTypes: [], // 规则类型
        productGroup: '', // 规则组：
        entryGroup: '',
        excludeProductGroup: true, // 排除选中
        customType: '', // 自定义分类：
    };
    indexClauseRelationParamProduct = {
        entryCode: '', // 规则编号
        exactSelect: false, // 精准查询
        effectStartDate: '', // 生效开始日期
        effectEndDate: '', // 生效结束日期
        invalidStartDate: '', // 失效开始日期
        invalidEndDate: '', // 失效结束日期
        entryName: '', // 规则说明
        clauseSource: '', // 条款来源
        riskCalTypes: [], // 作用范围
        accountControlValue: '', // 产品代码
        fundCode: '', //
        entryStatus: '', // 启用状态
        sourceType: '', // 规则来源
        entrySource: '',
        entryTypes: [], // 规则类型
        productGroup: '', // 规则组：
        entryGroup: '',
        excludeProductGroup: true, // 排除选中
        customType: '', // 自定义分类：
    };
    alertControlGrade: any[] = [];

    @Watch('ruleQueryDialog')
    async watchRuleQueryDialog(val) {
        this.dialogVisible = val;
        if (val == true) {
            // 风险类型
            this.EntryTypeList = DictionConstUtil.PojoToList(DictionConstUtil.EntryType);
            // 自定义风险
            this.customTypesList = (await DictionConstUtil.FNCustomType()) || [];
            // 产品代码
            this.fundCodeSelectData = await SGU_CACHE('FundInfo', '/fundInfo/list', []);
            // 条目组
            // this.getGroupList();
            // 风险等级
            this.alertControlGrade = DictionConstUtil.PojoToList(DictionConstUtil.ControlGrade2);
            // 条目数据
            let fubds = await SGU_CACHE('FundInfoByUser', '/fundInfo/list/byUser/like', []);
            let local = [];
            // 规则组
            this.getFundGroupList();
            for (let itme of fubds) {
                let datas = itme.fundCode + '-' + itme.fundName;
                local.push({ label: datas, id: itme.fundCode });
            }
            // 基金账户
            this.accountList = local;
        } else {
        }
    }
    @Watch('dialogVisible')
    watchDialogVisible(val) {
        if (val == false) {
            this.$emit('emitRuleQuery', val);
        }
    }
    // 获取适用产品组(规则组)下拉框、适用标签组
    private getFundGroupList(): void {
        this.$axios.post('/fundGroup/list').then((res: any) => {
            this.fundGroups = res;
        });
    }
    // 获取条目组
    // getGroupList() {
    //     this.$axios.get('/entry/group/list').then((res: any) => {
    //         this.entryGroupsList = [];
    //         res = res || [];
    //         for (let i = 0; i < res.length; i++) {
    //             this.entryGroupsList.push({ dictKey: res[i].groupCode, dictKeyName: res[i].groupName });
    //         }
    //     });
    // }
    confirmQuery(param) {
        console.log('Product', param, this.tabPaneType)
        if (param == 'comfirm') {
            if (this.tabPaneType == 'File') {
                this.indexClauseRelationParam.effectStartDate = this.startTime[0];
                this.indexClauseRelationParam.effectEndDate = this.startTime[1];
                this.indexClauseRelationParam.invalidStartDate = this.endTime[0];
                this.indexClauseRelationParam.invalidEndDate = this.endTime[1];
                this.$emit('emitConfirmQuery', this.indexClauseRelationParam);
            } else if (this.tabPaneType == 'Product') {
                console.log('55555')
                this.indexClauseRelationParamProduct.effectStartDate = this.startTime[0];
                this.indexClauseRelationParamProduct.effectEndDate = this.startTime[1];
                this.indexClauseRelationParamProduct.invalidStartDate = this.endTime[0];
                this.indexClauseRelationParamProduct.invalidEndDate = this.endTime[1];
                this.$emit('emitConfirmQueryProduct', this.indexClauseRelationParamProduct);
            }
        } else if (param == 'reset') {
            if (this.tabPaneType == 'File') {
                this.indexClauseRelationParam = {
                    entryCode: '', // 规则编号
                    exactSelect: false, // 精准查询
                    effectStartDate: '', // 生效束日期
                    invalidStartDate: '', // 失开始日期
                    effectEndDate: '', // 生效结效开始日期
                    invalidEndDate: '', // 失效结束日期
                    entryName: '', // 规则说明
                    clauseSource: '', // 条款来源
                    riskCalTypes: [], // 作用范围
                    accountControlValue: '', // 产品代码
                    fundCode: '', // 产品代码
                    entryStatus: '', // 启用状态
                    sourceType: '', // 规则来源
                    entrySource: '',
                    entryTypes: [], // 规则类型
                    productGroup: '', // 规则组：
                    entryGroup: '',
                    excludeProductGroup: true, // 排除选中
                    customType: '', // 自定义分类：
                };
                this.startTime = '';
                this.endTime = '';
            } else if (this.tabPaneType == 'Product') {
                this.indexClauseRelationParamProduct = {
                    entryCode: '', // 规则编号
                    exactSelect: false, // 精准查询
                    effectStartDate: '', // 生效开始日期
                    effectEndDate: '', // 生效结束日期
                    invalidStartDate: '', // 失效开始日期
                    invalidEndDate: '', // 失效结束日期
                    entryName: '', // 规则说明
                    clauseSource: '', // 条款来源
                    riskCalTypes: [], // 作用范围
                    accountControlValue: '', // 产品代码
                    fundCode: '', // 产品代码
                    entryStatus: '', // 启用状态
                    sourceType: '', // 规则来源
                    entrySource: '',
                    entryTypes: [], // 规则类型
                    productGroup: '', // 规则组：
                    entryGroup: '',
                    excludeProductGroup: true, // 排除选中
                    customType: '', // 自定义分类：
                };
                this.startTimeProduct = '';
                this.endTimeProduct = '';
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.query {
    // height: calc(98vh - 7px);
    background: #ffffff;
}
table {
    border-spacing: 10px;
    tr {
        td:nth-child(1),
        td:nth-child(3) {
            text-align: right;
            width: 90px;
        }
        td:nth-child(2) {
            .el-input {
                width: 100%;
            }
            .el-select {
                width: 100%;
            }
        }
        td:nth-child(4) {
            .el-select {
                width: 100%;
            }
        }
    }
}
</style>
